<template>
    <button href="javascript:;" 
            class="cb-btn" 
            :class="clsstr.join(' ')"
            @click="buttonHandler"
            @blur="taggleMenus('hide')"
    >
        <slot></slot>
    </button>
</template> 
<script>
import {useAttrs, reactive} from 'vue'

const hideClassStr = "hide-menu"
const selectClass = "selected"
const noHoverColor = 'no-hover-color'
export default {
  name: 'CbButton',
  data(){
    return {
        clsstr: [],
        useMenu: false
    }
  },
  created(){ 
    const attrs = useAttrs()
    if( typeof attrs['min'] != 'undefined' ){
        this.clsstr.push('min')
    }
    if( typeof attrs['fullw'] != 'undefined'){
        this.clsstr.push('fullw')
    }
    if( typeof attrs['menus'] != 'undefined'){
        this.useMenu = true
        this.clsstr.push(hideClassStr)
    }
    if(typeof attrs['no-hover-color'] != 'undefined' ){
        this.clsstr.push(noHoverColor)
    }
  },

  methods:{
    buttonHandler(e){
        this.taggleMenus()
        // console.log('click....')
        //this.$emit('click', e)
    },

    taggleMenus(flg=''){
        if(!this.useMenu) return
        if(flg=='hide'){
            this.clsstr = this.clsstr.filter( v => v!=selectClass)
            this.clsstr.push(hideClassStr)
        }else if(flg=='show'){
            this.clsstr = this.clsstr.filter( v => v!=hideClassStr)
            this.clsstr.push(selectClass)
        }else{
            const hideIndex =  this.clsstr.indexOf(hideClassStr);
            if( hideIndex >= 0 ){
                this.clsstr.splice(hideIndex, 1)
                this.clsstr.push(selectClass)
            }else{
                this.clsstr = this.clsstr.filter( v => v!=selectClass)
                this.clsstr.push(hideClassStr)
            }
        }
    }
  }
};
</script>
<style scoped lang="scss">
.cb-btn{
    position: relative;
    border:0;
    background: transparent;
    margin:0 1px;
    padding: 0px 7px;
    color: $ft-color;
    line-height:28px;
    border-radius: 3px;
    transition-duration: 0.3s;
    &:hover{
        background: $hover-bg-color;
        cursor: pointer;
        color:$ft-act-color;
    }
    &.no-hover-color{
        background: unset;
    }
    &.hide-menu{
        ::v-deep ._menu_panel{
            display: none;
        }
    }

    &.selected{
        background-color: $btn-selected-bg;
    }

    &.min{
        line-height:18px;
        padding:1px 4px;
        font-size: .7rem;
    }
    &.fullw{
        width:100%;
    }
}
</style>